<template>
  <div class="product container-fluid mt-5">
    <div class="container-xxl px-0 mx-0 mt-5 d-flex justify-content-center flex-column mx-auto">
      
      <div class="d-flex justify-content-md-end justify-content-around my-3">
        <!-- 全部品牌下拉菜单 -->
        <div class="dropdown me-4 ">
          <button class="btn btn-primary bg-primary border-0 rounded-pill px-4 py-2" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,5">
            <small>{{ firstText[first] }}</small>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-menu-end overflow-auto" aria-labelledby="dropdownMenuButton1" style="max-height: 200px">
            <li v-for="(item,index) in firstText" :key="index" @click="handleClick('first',index)">
              <a class="dropdown-item d-flex justify-content-between align-items-center" href="javascript: void(0);">
              <small class="pe-3">{{ item }}</small>
              <img v-if="first == index" style="width: 10px;height: 10px;" src="" alt="">
              </a>
            </li>
          </ul>
        </div>
        <!-- 综合排序下拉菜单 -->
        <div class="dropdown">
            <button class="btn btn-primary bg-primary border-0 rounded-pill py-2 px-4" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,5">
              <small>{{ secondText[second] }}</small>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
              <li v-for="(item,index) in secondText" :key="index" @click="handleClick('second',index)">
                <a class="dropdown-item d-flex justify-content-between align-items-center" href="javascript: void(0);">
                <small>{{ item }}</small>
                <img v-if="second == index" style="width: 10px;height: 10px;" src="" alt="">
                </a>
              </li>
            </ul>
          </div>

      </div>
      <!-- card -->
      <div class="row d-flex justify-content-center flex-column">
        <div id="cd" class="cd d-flex justify-content-between flex-wrap">
          <card @goTo="goTo('/details')" class="card col-6 my-2 col-md-4 border-0" v-for="i in lists" :key="i"></card>
        </div>
        <p class="text-center my-2">
          <small>{{ text }}</small>
        </p>
      </div>
    </div>
    </div>
</template>

<script>
import card from '../../components/card/card.vue'
export default {
  name: "transfer",
  data() {
    return {
      lists: Array(12),
      text: '加载中',
      first: 0,
      second: 0,
      firstText: ['全部品牌','AuctPool NFT Studio','上海美术电影制片厂','曾祥瑞','AuctPool NFT Studio','上海美术电影制片厂','曾祥瑞','AuctPool NFT Studio','上海美术电影制片厂','曾祥瑞','AuctPool NFT Studio','上海美术电影制片厂','曾祥瑞'],
      secondText: ['综合排序','价格从低到高','价格从高到底']
    };
  },
  created() {
    
  },
  methods: {
    handleClick(current,index){
      this[current] = index
    },
    goTo(url){
      console.log('1');
      if(!location.hash.includes(url)){
        this.$router.push(url)
      }
    }
  },
  components: {
    card
  },
  async mounted(){
    const cd = document.getElementById('cd') 
    const card = document.getElementsByClassName('card') 
    window.addEventListener('scroll', e => {
      let cardh = card[0].scrollHeight
      let cdh = cd.scrollHeight
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      if(this.lists.length <= 30){
        if(top + 2 * cardh >= cdh){
          Promise.resolve().then(() => {
            this.lists=[...this.lists, ...Array(6)];
            console.log('resolve');
          })
        }
      }else{
        this.text = '尽情期待~'
      }

    })
    
  }
};
</script>
<style scoped>

</style>